<!doctype html>
<html>
<head>
	<title>jQuery Infinite Scroll Helper Example</title>
	<script src="../lib/jquery-1.8.2.min.js"></script>
	<script src="../jquery.infinite-scroll-helper.js"></script>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		.content {
			height: 1100px;
			background-color: red;
		}
		#wrapper {
			position: relative;
			margin-left: 200px;
		}

		#wrapper .loader-wrap {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding-left: 200px;
			box-sizing: border-box;
			-webkit-perspective: 400px;
	   		-moz-perspective: 400px;
	    	-ms-perspective: 400px;
	        perspective: 400px;
		}
		#ov-hidden {
			position: fixed;
			z-index: 10;
			width: 200px;
			height: 100%;
			border: 1px solid white;
		}
		#ov-content-wrapper {
			overflow-y: scroll;
			position: relative;
			height: 100%;
		}
		#ov-hidden .load-more {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			display: none;
		}
		#ov-hidden.loading .load-more {
			display: block;
		}
		#ov-hidden .content {
			height: 800px;
			background-color: salmon;
		}
		#wrapper .loader {
			display: block;
			padding: 20px 0;
			width: 100%;
			opacity: 0;
			color: #999;
			font: 35px Helvitica,Arial,sans-serif;
			background-color: white;
			text-align: center;
			
			-webkit-box-shadow: 0px -1px 5px rgba(0,0,0,.4);
			box-shadow: 0px -1px 5px rgba(0,0,0,.4);		

			-webkit-transition: all 450ms ease-out;
		  	-moz-transition: all 450ms ease-out;
		    -ms-transition: all 450ms ease-out;
	        transition: all 450ms ease-out;

			-webkit-transform-origin: 50% 100%;
            -moz-transform-origin: 50% 100%;
		    -ms-transform-origin: 50% 100%;
	        transform-origin: 50% 100%;

	        -webkit-transform: translate3d( 0px, 0px, 0px ) rotateX( 90deg );
	       	-moz-transform: translate3d( 0px, 0px, 0px ) rotateX( 90deg );
	        -ms-transform: translate3d( 0px, 0px, 0px ) rotateX( 90deg );
	        transform: translate3d( 0px, 0px, 0px ) rotateX( 90deg );
		}

		#wrapper.loading .loader {
			opacity: .9;

			-webkit-transform: translate3d( 0px, 0px, 0px ) rotateX( 0deg );
	        -moz-transform: translate3d( 0px, 0px, 0px ) rotateX( 0deg );
	        -ms-transform: translate3d( 0px, 0px, 0px ) rotateX( 0deg );
	        transform: translate3d( 0px, 0px, 0px ) rotateX( 0deg );
		}

	</style>

	<script>
		var loadingCount = 0,
			totalPages = 4;
		
		var colors = ['red', 'blue', 'green', 'yellow', 'salmon', 'purple'];
		
		$(function() {

			(function() {
				var pageCount;
				// using jQuery plugin instantiation
				$('#wrapper').infiniteScrollHelper({
					
					loadMore: function(page, done) {
						// ajax request would be kicked off here
						pageCount = page;
						$('.loader').text('Loading Page ' + page + '...');

						// simulating loading of some content
						setTimeout(
							function() {
								var colorIndex = (pageCount - 1) % colors.length;
								$('#wrapper').append('<div class="content" style=" background-color: ' + colors[colorIndex] + ';">');

								if (pageCount == totalPages) { // if we are at the last page, destroy the plugin instance
									console.log('desroying');
									$('#wrapper').infiniteScrollHelper('destroy');
								}

								done();
							} 
						, 2000);
					},
					bottomBuffer: 80,
					// using the triggerInitialLoad option
					triggerInitialLoad: true
				})
			}());

			(function() {
				var pageCount;
				// using standard constructor instantiation
				var ish = new InfiniteScrollHelper($('#ov-content-wrapper')[0], {
					
					loadMore: function(page, done) {
						console.log('load more');
						// ajax request would be kicked off here
						pageCount = page;
						$('.load-more').text('Loading Page ' + page + '...');

						// simulating loading of some content
						setTimeout(
							function() {
								var colorIndex = (pageCount - 1) % colors.length;
								$('#ov-content-wrapper').append('<div class="content" style=" background-color: ' + colors[colorIndex] + ';">');

								if (pageCount == totalPages) { // if we are at the last page, destroy the plugin instance
									console.log('desroying');
									ish.destroy();
								}

								done();
							} 
						, 2000);
					},
					bottomBuffer: 80,
					loadingClassTarget: '#ov-hidden'
				});

			}());
		});

	</script>
</head>
<body>
	<div id="ov-hidden">
		<div id="ov-content-wrapper">
			<div class="content">
				
			</div>
		</div>
		<div class="load-more">Loading...</div>	
	</div>
	<div id="wrapper">
		<div class="loader-wrap">
			<div class="loader">Loading...</div>
		</div>
	</div>
</body>
</html>